<template>
  <div class="clock-container" :class="props.inline ? 'flex items-center' : ''">
    <div class="clock-date" v-if="props.date">
      {{ currentDate }}
    </div>

    <div class="clock-time" v-if="props.time">
      {{ currentTime }}
    </div>

  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { formatDate, formatTime } from 'src/utils/dateUtils';

const props = defineProps({
  date: {
    type: Boolean,
    default: false
  },
  time: {
    type: Boolean,
    default: false
  },
  inline: {
    type: Boolean,
    default: false
  }
})

const currentDate = ref('date')
const currentTime = ref('time')

const clockInterval = setInterval(() => {
  const d = new Date()
  if (props.date) {
    currentDate.value = formatDate(d)
  }
  if (props.time) {
    currentTime.value = formatTime(d)
  }
})

onBeforeUnmount(() => {
  clearInterval(clockInterval)
})


</script>
  


<style scoped>
.clock-date {
  font-size: 1rem;
}

.clock-time {
  font-size: 1rem;
}
</style>
